<template>
  <a-row :gutter="16">
    <!-- 左侧: 数据选择区域 -->
    <a-col span="6">
      <a-card title="数据选择区域" class="dataSelectArea">
        <div class="type">
          <span style="margin-bottom: 10px">选择数据类型</span>
          <a-select
            v-model:value="selectedDataType"
            placeholder="选择数据类型"
            allowClear
            @change="changeSelect"
            style="width: 260px; margin-bottom: 10px"
            :options="option"
          >
            <!-- 更多数据类型 -->
          </a-select>
          <div>
            <a-button type="primary" @click="addSelectedData" :disabled="disabled"> 添加 </a-button>
          </div>
        </div>

        <!-- 已选数据 -->
        <div class="result">
          <span>已选数据</span>
          <a-list :dataSource="selectedData" bordered style="margin-top: 20px">
            <template #renderItem="{ item, index }">
              <a-list-item
                >{{ item }}
                <template #actions>
                  <a key="list-loadmore-edit" @click="removeData(item)">移除</a>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-card>
    </a-col>

    <!-- 右侧: 相关性分析区域 -->
    <a-col span="18">
      <a-card title="相关性分析区域">
        <!-- 相关性矩阵 -->
        <a-card title="相关性矩阵">
          <div class="matrix-container">
            <div class="correlation-matrix">
              <a-table :dataSource="correlationMatrix" :columns="columns" pagination="false" bordered />
            </div>
          </div>
        </a-card>

        <!-- 趋势图表 -->
        <a-card title="趋势图表">
          <div class="trend-container">
            <Echart :option="trendChartOptions" name="trendChartOptions" />
          </div>
        </a-card>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
  import { ref, computed, watch } from 'vue';
  import Echart from '/@/components/e-chart.vue'; // 确保路径正确

  // 数据选择
  const selectedDataType = ref('');
  const selectedData = ref([]);

  const disabled = ref(true);

  // 选择器
  const option = ref([
    { value: '电能消耗', label: '电能消耗' },
    { value: '碳排放', label: '碳排放' },
    { value: 'PM2.5', label: 'PM2.5' },
    { value: '温度', label: '温度' },
  ]);

  watch(
    () => {
      selectedDataType.value;
    },
    (newValue) => {
      console.log('222', selectedDataType.value);
      if (selectedDataType.value == '' || selectedDataType.value == null) {
        disabled.value = true;
      } else {
        disabled.value = false;
      }
    }
  );
  function changeSelect(data) {
    console.log('111', selectedDataType.value);
    if (selectedDataType.value == '' || selectedDataType.value == null) {
      disabled.value = true;
    } else {
      disabled.value = false;
    }
  }

  // 相关性矩阵的选项配置
  const correlationMatrix = ref([
    { key: '1', name: '电能消耗', 电能消耗: 1.0, 碳排放: 0.85, PM2_5: 0.6, NOx: 0.45, 温度: 0.3, 湿度: -0.2 },
    { key: '2', name: '碳排放', 电能消耗: 0.85, 碳排放: 1.0, PM2_5: 0.7, NOx: 0.55, 温度: 0.4, 湿度: -0.25 },
    // Add more rows if needed
  ]);

  const columns = [
    { title: '', dataIndex: 'name', key: 'name' },
    { title: '电能消耗', dataIndex: '电能消耗', key: '电能消耗' },
    { title: '碳排放', dataIndex: '碳排放', key: '碳排放' },
    { title: 'PM2.5', dataIndex: 'PM2_5', key: 'PM2_5' },
    { title: 'NOx', dataIndex: 'NOx', key: 'NOx' },
    { title: '温度', dataIndex: '温度', key: '温度' },
    { title: '湿度', dataIndex: '湿度', key: '湿度' },
  ];

  // 趋势图表的选项配置
  const trendChartOptions = computed(() => {
    return {
      tooltip: { trigger: 'axis' },
      legend: {
        data: ['电能消耗', '碳排放', 'PM2.5'],
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2024-10-01', '2024-10-02', '2024-10-03', '2024-10-04'], // 示例日期
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '电能消耗',
          type: 'line',
          data: [20, 30, 40, 50],
          smooth: true,
        },
        {
          name: '碳排放',
          type: 'line',
          data: [15, 25, 35, 45],
          smooth: true,
        },
        {
          name: 'PM2.5',
          type: 'line',
          data: [30, 40, 50, 60],
          smooth: true,
        },
      ],
    };
  });

  // 添加选中的数据
  const addSelectedData = () => {
    if (selectedDataType.value && !selectedData.value.includes(selectedDataType.value)) {
      selectedData.value.push(selectedDataType.value);
    }
    selectedDataType.value = '';
  };

  // 移除选中的数据
  const removeData = (data) => {
    selectedData.value = selectedData.value.filter((item) => item !== data);
  };
</script>

<style scoped>
  .dataSelectArea {
    height: 1015px;
  }
  .type {
    span {
      font-size: 16px;
    }
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }
  .result {
    span {
      font-size: 16px;
    }
  }
  .matrix-container {
    width: 100%;
    height: 400px;
  }
  .trend-container {
    width: 100%;
    height: 300px;
  }
</style>
